style: Use unlinked rounded buttons for notifications

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3427>

diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss
index 1a6e687c0c6d0cdcbb7b61570856ef351f9b3d6a..846427e8e0fd264e4294fefdf819d0a51e41ccc7 100644 (file)
--- a/data/theme/gnome-shell-sass/_common.scss
+++ b/data/theme/gnome-shell-sass/_common.scss
@@ -39,6 +39,9 @@ $forced_circular_radius: 999px;
 // radii of things that display over other things, e.g. popovers
 $modal_radius: $base_border_radius * 2;
 
+// radii of dialogs
+$alert_radius: 18px;
+
 // Chroma key to flag when a background-color is always occluded, not visible.
 // This allows any box-shadow behind it to be rendered more efficiently by
 // omitting the middle rectangle.
@@ -204,49 +207,18 @@ stage {
   &:insensitive { @include button(insensitive, $style: notification);}
 }
 
-
 // buttons in dialogs
-// use a linked style
 %dialog_button {
-  padding: $base_padding * 2;
   font-weight: bold;
+  padding: $base_padding * 2;
+  border-radius: $base_border_radius * 1.5;
 
-  &:ltr {margin-right: 1px;}
-  &:rtl {margin-left: 1px;}
-
-  @include button(normal, $style: bubble);
-  &:focus { @include button(focus, $style: bubble);}
-  &:hover { @include button(hover, $style: bubble);}
-  &:active { @include button(active, $style: bubble);}
-  &:checked { @include button(checked, $style: bubble);}
-  &:insensitive { @include button(insensitive, $style: bubble);}
-
-  // needs a 1px adjustment to fit exactly into the outer radius
-  $dialog_button_radius: $modal_radius - 1px;
-
-  &:first-child:ltr {
-    border-radius: 0 0 0 $dialog_button_radius;
-  }
-
-  &:last-child:ltr {
-    border-radius: 0 0 $dialog_button_radius;
-    margin-right: 0 !important;
-  }
-
-  &:first-child:rtl {
-    border-radius: 0 0 $dialog_button_radius;
-  }
-
-  &:last-child:rtl {
-    border-radius: 0 0 0 $dialog_button_radius;
-    margin-left: 0 !important;
-  }
-
-  &:first-child:last-child {
-    border-radius: 0 0 $dialog_button_radius $dialog_button_radius;
-    margin-left: 0 !important;
-    margin-right: 0 !important;
-  }
+  @include button(normal, $style: dialog);
+  &:focus { @include button(focus, $style: dialog);}
+  &:hover { @include button(hover, $style: dialog);}
+  &:active { @include button(active, $style: dialog);}
+  &:checked { @include button(checked, $style: dialog);}
+  &:insensitive { @include button(insensitive, $style: dialog);}
 }
 
 // tooltip

diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss
index 4007e56c1acf6309fa6e96d4bde0bedb1a726743..a2fa5f2b2fcf795995d0681063f14addbb09ee13 100644 (file)
--- a/data/theme/gnome-shell-sass/_drawing.scss
+++ b/data/theme/gnome-shell-sass/_drawing.scss
@@ -160,7 +160,7 @@
   //                  - normal, focus, hover, active, checked, insensitive, default, undecorated
   // $c:            button bg color, derived from bg_color
   // $tc:           button text color, derived from fg_color
-  // $style:        button style, possible values: card, bubble, flat, default
+  // $style:        button style, possible values: card, notification, dialog, flat, default
   // $always_dark:  override the light theme check to use dark colors, true or false
   //
 
@@ -211,7 +211,7 @@
 
   // background color override for buttons that use transparency
   // styles: dialogs bubbles, lockscreen
-  @if $style == 'bubble' or $style == 'lockscreen' {
+  @if $style == 'dialog' or $style == 'lockscreen' {
     $button_bg_color: transparentize($tc, .9);
     $hover_button_bg_color: transparentize($tc, .87);
     $active_button_bg_color: transparentize($tc, .84);

diff --git a/data/theme/gnome-shell-sass/widgets/_dialogs.scss b/data/theme/gnome-shell-sass/widgets/_dialogs.scss
index d3adbcb1d5f94c5a807e0568431d0b0e12aeec70..c08eb91ba56336a20098157828dd3c8c027aa683 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_dialogs.scss
+++ b/data/theme/gnome-shell-sass/widgets/_dialogs.scss
@@ -6,12 +6,14 @@
 
 .modal-dialog {
   background-color: $bg_color;
-  border-radius: $modal_radius;
+  border-radius: $alert_radius;
   box-shadow: inset 0 0 0 1px $outer_borders_color;
+  padding: $base_padding * 4;
 
   .modal-dialog-content-box {
-    margin: $base_margin * 8 $base_margin * 10;
     spacing: $base_margin * 8;
+    margin-top: $base_margin * 2;
+    margin-bottom: $base_margin * 4;
     max-width: 28em;
   }
 
@@ -22,7 +24,7 @@
 
 /* End Session Dialog */
 .end-session-dialog {
-  width: 30em;
+  width: 24em;
 
   .end-session-dialog-battery-warning,
   .dialog-list-title {

diff --git a/js/ui/dialog.js b/js/ui/dialog.js
index b99caa8efa337b26a48f19c21a08e2267e6cc14b..7337407e65e69c1e17781d3201b2850cef4c3b76 100644 (file)
--- a/js/ui/dialog.js
+++ b/js/ui/dialog.js
@@ -56,7 +56,10 @@ class Dialog extends St.Widget {
         this._dialog.add_child(this.contentLayout);
 
         this.buttonLayout = new St.Widget({
-            layout_manager: new Clutter.BoxLayout({homogeneous: true}),
+            layout_manager: new Clutter.BoxLayout({
+                spacing: 12,
+                homogeneous: true,
+            }),
         });
         this._dialog.add_child(this.buttonLayout);
     }